<template>
  <!-- el-upload组件 官网没有给我们使用ajax上传图片的demo，给我们的demo都是使用action这种方式 -->
  <!-- 上传的，只需要给一个服务器地址，但是这个需要我们的服务器配合 -->
  <!-- 我们通过百度发现 需要使用  http-request属性才能通过 axios的方式去发请求 -->
  <el-upload
    class="avatar-uploader"
    :class="{'has-image': value}"
    action=""
    :http-request="uploadImage"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="value" :src="value" alt="">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
// 1. 下包  yarn add cos-js-sdk-v5  ===  npm i cos-js-sdk-v5
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDXzGJApFSRCdokcLr77tSm8JQP8bYFiyz',
  SecretKey: 'yjDSRAdzT3b2HI8sQlslPp3D8d6OexFc'
})

export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    beforeAvatarUpload(e) {
      console.log(e)
      // MIME 类型
      // 去网上自己找excel的类型， jpg的类型    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
      // 这里的解法是针对el-upload。 如果是原生的 <input type="file" accept="png,jpeg">
      if (e.type !== 'image/jpeg' && e.type !== 'image/png' && e.type !== 'image/jpg') {
        this.$message.error('上传文件类型只支持jpeg 和 png')
        return false
      }

      // 1MB = 1 * 1024 * 1024Byte   1kB 1024Byte  1Byte = 8bit
      if (e.size > 2 * 1024 * 1024) {
        this.$message.error('上传文件大小最大只支持2MB')
        return false
      }

      return true
    },
    uploadImage(e) {
      // 在这里面使用axios发请求，不需要使用 action
      console.log(e)
      // 图片储存的位置不是在我们自己的服务器上面，而是公司购买的一些 腾讯云储存，阿里云储存
      // 我们公司自己的服务器，只储存一些 http://xxxxx.ss 地址而已
      cos.putObject({
        Bucket: 'heima95-1305752761', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: e.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: e.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        // 下面这个表示请求上传的进度
        // onProgress: function(progressData) {
        //   console.log(JSON.stringify(progressData))
        // }
        // 下面这个函数就是上传成功或者失败执行的函数
        // 写法是 error first原理
      }, (err, data) => {
        if (err) {
          console.log(err)
          return
        }
        const url = 'http://' + data.Location
        this.$emit('input', url)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  width: 300px;
  img {
    width: 100%;
  }
}
// .avatar-uploader[data-xxx-xxx] .el-upload {}
// .[data-xxx-xxx]avatar-uploader .el-upload {}
::v-deep.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep.avatar-uploader.has-image .el-upload {
    border: none
  }
  ::v-deep.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
